<template>
	<view class="base-resource">
		<!-- <tn-nav-bar  backTitle="基地资源"></tn-nav-bar> -->
		<navSearchBar title="讲师资源" :hasSearch="true" :zIndex="titleZindex" @conFirmSearch="topSearch" ref="topSearchRef"></navSearchBar>
		<view style="height: 100rpx;">
			<view class="top-operate" :style="{zIndex:titleZindex-1}">
				
					<text @click="openPop('SORT')" :class="[searchData['order'] !== ''?'active-style':'']">排序<text class="tn-icon-sort"></text></text>
					<text @click="openPop('TYPE')" :class="[searchData['category_id'] !== ''?'active-style':'']">分类<text class="tn-icon-down-triangle"></text></text>
					<text @click="openField" :class="[searchData['province_id'] !== ''?'active-style':'']">区域<text class="tn-icon-down-triangle"></text></text>
					
					<text @click="openPop('COOPERATION')" :class="[searchData['cooperation_level'] !== ''?'active-style':'']">等级<text class="tn-icon-down-triangle"></text></text>
					<text @click="clearSelect" ><text class="tn-icon-clear"></text>清空条件</text>
			</view>
		</view>
		<scroll-view  class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="scrolltolower ">
				
				
				<view  class="body-field" >
					<imageCard v-for="(item,index) in baseList" :key="index" :data="item" @routeTo="routeTo" label="name" class="image-body"></imageCard>
				
				</view>
				<!-- <view class="mask" v-if="maskVisible"></view> -->
		</scroll-view>
		<tn-popup v-model="maskVisible" mode="top" :marginTop="popupMarginTop">
		  <view :class="[column==3?'popup-field-3':'popup-field-4']"  class="popup-field">
		  	<view :class="[column==3?'text-body-3':'text-body-4',activeHandle(item)?'active-style':'']" class="text-body" v-for="(item,index) in popupDisplayList" :key="index" @click="selectSearch(item)">
		  		<text>{{item.text}}</text>
		  	</view>
		  </view>
		</tn-popup>
		<tn-picker safeAreaInsetBottom mode="multiSelector" v-model="areaShow"  :range="areaData" rangeKey="title" :defaultSelector="initAreaData" @columnchange="areaColumnchange" @confirm="areaConfirm"></tn-picker>
		<!-- valueName="id" labelName="title" -->
		
	</view>
</template>

<script>
	import imageCard from "../../common/imageCard";
	import {rpxToPx} from "@/common/util/util"
	
	// import popup from "../../../components/uni-popup/uni-popup.vue";
	const SORT = 'SORT';
	const STARLEVEL = 'STAR';
	const COOPERATIONLEVEL = 'COOPERATION';
	const BASETYPE = 'TYPE';
	export default {
		components:{
			imageCard,
			
			
		},
		data() {
			return {
				baseList:[],
				popupDisplayList:[],
				sortData:[{text:'默认排序',value:''},{text:'等级最高',value:1}],
				// starLevelData:[],
				cooperationLevelData:[],
				typeData:[],
				areaShow:false,
				maskVisible:false,
				titleZindex:100,
				column:3,
				popupMarginTop:90,
				searchData:{
					order:'',
					// conference_total:'',
					// stay_total:'',
					// accommodate_total:'',
					cooperation_level:'',
					// star_level:'',
					region_id:'',
					province_id:'',
					city_id:'',
					category_id:'',
					
				},
				areaData:[[{ title: "不限", id:''}],[{ title: "不限", id:''}],[{ title: "不限", id:''}]],
				//areaData:[[{ title: "天河区", id:"1"},{ title: "天河区2", id:"3"}],[{ title: "天河区2222", id:"4"},{ title: "天河区888", id:"5"}],[{ title: "天河区555555", id:"6"},{ title: "天河区9999", id:"440108"}]],
				areaText:'',
				initAreaData:[0,0,0],
				currentPage:1,
				pageSize:20,
				total:0,
			}
		},
		
		created(){
			//它比onload还先 销毁是unload先
			//不能访问this.$Route
			console.log('baseoncreated')
			
			
		},
		onLoad(e){
			console.log('baseonload',e,this.$Route.query)
			const px = Math.floor(rpxToPx(100));
			let height = this.$store.getters.my_custom_navBarHeight;
			this.popupMarginTop = height + px;
			
			this.getList();
			this.getTeachingType();
			this.getCooperationLevel();
			this.getAreaList(0);
		},
		onShow(e){
			
			
		},
		onHide() {
			console.log('onHide teacher',this)
		},
		onUnload(){
			
			console.log('onUnload teacher')
		},
		beforeDestroy(){
			console.log('beforeDestroy teacher')
		},
		destroyed(){
			console.log('destroyed teacher')
		},
		onReachBottom(){
			console.log('onReachBottom')
			if(this.total > this.pageSize * this.currentPage){
				this.currentPage += 1;
				this.getList();
			}
		},
		methods: {
			handleSearchByPage(){
				this.currentPage = 1;
				this.baseList = [];
				this.getList();
			},
			clearSelect(){
				this.closeDialog();
				for(let key of Object.keys(this.searchData)){
					this.searchData[key] = '';
				}
				this.$refs.topSearchRef.setValue('');
				this.handleSearchByPage();
			},
			
			areaConfirm(data){
				console.log('datatatata',data,this.searchData)
				let proviceData = this.areaData[0][data[0]];
				let cityData = this.areaData[1][data[1]];
				let regionData = this.areaData[2][data[2]];
				this.searchData['province_id'] = proviceData.id;
				this.searchData['city_id'] = cityData.id;
				this.searchData['region_id'] = regionData.id;
				if(this.searchData['province_id'] !== ''){
					this.areaText = proviceData.title;
				}
				if(this.searchData['city_id'] !== ''){
					this.areaText += '/'+ cityData.title;
				}
				if(this.searchData['region_id'] !== ''){
					this.areaText += '/'+ regionData.title;
				}
				
				this.handleSearchByPage();
			},
			areaColumnchange({column, index}){
				console.log('column',column,index);
				let parentId = this.areaData[column][index].id;
				if(column < 2){
					this.getAreaList(parentId, column+1);
				}
				this.$set(this.initAreaData,column,index);
			},
			
			getAreaList(parentId,column=0){
				this.$http.get('/api/common/area/select',{parent_id:parentId}).then((res) => {
					if(res.data.status == 200) {
						let data = res.data.data||[];
						data.unshift({ title: "不限", id:''});
						this.$set(this.areaData,column,data)
						console.log('ccccccccc',this.areaData)
						
					} else {
						
					}
					
				})
			},
			getTeachingType(){
				this.$http.get('/api/dictionary/data',{title:'teacher_level'}).then((res) => {
					
					if(res.data.status == 200) {
						console.log('getTeacherType', res.data.data)
						this.typeData = res.data.data || [];
						this.typeData.unshift({text:'不限',value:''});
					}else{
						
					}
				})
			},
			getCooperationLevel(){
				this.$http.get('/api/dictionary/data',{title:'cooperation_level'}).then((res) => {
					
					if(res.data.status == 200) {
						console.log('cooperation_level', res.data.data)
						this.cooperationLevelData = res.data.data || [];
						this.cooperationLevelData.unshift({text:'不限',value:''});
					}else{
						
					}
				})
			},
			getList(){
				this.$tip.loading();
				const reqData = {
					...this.searchData,
					page:this.currentPage,
					limit:this.pageSize,
				}
				this.$http.get('/api/business/teacher/list',reqData).then((res) => {
					this.$tip.loaded();
					if(res.data.status == 200) {
						let list = res.data.data.data || [];
						this.baseList = this.baseList.concat(list);
						this.currentPage = res.data.data.current_page||1;
						this.pageSize =  res.data.data.per_page||20;
						this.total = res.data.data.total||0;
					}else{
						
					}
				})
			},
			routeTo(item) {
				this.$Router.push({name:'teacherResourceDetail',query:{id:item.id}})
			},
			scrolltolower(){
				console.log('scrolltolower',e)
			},
			
			openPop(type){
				this.closeDialog();
				this.maskVisible = true;
				this.titleZindex = 29999;
				let list = [];
				this.type = type;
				if(this.type == SORT){
					list = this.sortData;
					this.column = 3;
				} else if (this.type == BASETYPE) {
					list = this.typeData;
					this.column = 4;
				} else {
					list = this.cooperationLevelData;
					this.column = 4;
				}
				console.log('wwwwwww',list,type)
				this.popupDisplayList = list;
				// this.$refs.popupRef.open();
			},
			openField(){
				this.closeDialog();
				this.areaShow = true;
			},
			openSelect(){
				this.closeDialog();
				this.$Router.push({name:'baseResourceFilter',query:{
					starLevelData:this.starLevelData,
					sortData:this.sortData,
					cooperationLevelData:this.cooperationLevelData,
					searchData:this.searchData,
					areaText:this.areaText
					
				}});
			},
			closeDialog(){
				this.maskVisible = false;
				this.titleZindex = 100;
				this.areaShow = false;
				this.industyShow = false;
			},
			activeHandle(item){
				if(this.type == SORT) {
					return item.value == this.searchData['order']
				} else if (this.type == BASETYPE) {
					return item.value == this.searchData['category_id']
				} else {
					return item.value == this.searchData['cooperation_level']
				}
			},
			selectSearch(item){
				this.maskVisible = false;
				if(this.type == SORT) {
					this.searchData['order'] = item.value;
				} else if (this.type == BASETYPE) {
					this.searchData['category_id'] = item.value;
					
				} else {
					this.searchData['cooperation_level'] = item.value;
				}
				this.handleSearchByPage();
				
			},
			topSearch(value){
				this.searchData['name'] = value;
				this.handleSearchByPage();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.base-resource{
		height: 100%;
		.custom-tabbar-page {
			// height: calc(100vh - (134rpx + 88rpx + env(safe-area-inset-bottom) / 2));
			
		
	}
	.top-operate{
		padding-top:10rpx;
		height: 100rpx;
		width: 100%;
		display: flex;
		position: fixed;
		background-color: #fff;
		border-bottom: 2rpx solid #EFEFEF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text{
			color:#6F6F6F;
		}
		[class*='tn-icon-']{
			color:#D9D9D9;
		}
		.tn-icon-filter{
			color: #757575;
		}
		.active-style{
			color: #EE8731;
			[class*='tn-icon-']{
				color: #EE8731;
			}
		}
	}
	
	.body-field{
		
		padding:30rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 30rpx;
	
		.image-body{
			
			
			
			
		}
		
	}
	.popup-field-4{
		grid-template-columns:1fr 1fr 1fr 1fr;
	}
	.popup-field-3{
		
		grid-template-columns:1fr 1fr 1fr;
		
	}
	.popup-field{
		
		padding: 28rpx 28rpx 30rpx 30rpx;
		display: grid;
		// justify-content: space-between;
		// flex-wrap: wrap;
		
		grid-column-gap: 20rpx;
		grid-row-gap: 20rpx;
		.text-body{
			text-align: center;
			line-height: 72rpx;
			font-size: 24rpx;
			color:#6F6F6F;
			background-color: #F7F8FC;
			border-radius: 10rpx;
		}
		.text-body-3{
			
			width: 220rpx;
			height: 72rpx;
			
		}
		.text-body-4{
			
			width: 160rpx;
			height: 72rpx;
			
		}
		.active-style{
			border: 2rpx solid #FFA457;
			background-color: #FDF1E5;
			color: #EE8731;
		}
	}
}

</style>
